import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('portalLoginStore')
@observer
class E9MultiLang extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { portalLoginStore } = this.props;
        const { multiLangs, state, setState } = portalLoginStore;
        const { langId, langText, loginSettingInfo = {}, hasMultiLang, multiLangVisible } = state;
        const { loginForm = {} } = loginSettingInfo;
        const color = this.props.color || loginForm.color;

        if (!hasMultiLang) {
            return <div className="e9login-multiLang" />;
        }

        let selectedClassName = '';
        let multiLangListComp = '';
        if (multiLangVisible) {
            selectedClassName = 'e9login-multiLangText-selected';
            multiLangListComp = (
                <div className="e9login-multiLangList">
                    <ul>
                        {
                            multiLangs.map(item => (
                                    <li
                                      className={item.id == langId ? 'e9login-multiLangList-selected' : ''}
                                      onClick={() => {
                                            portalLoginStore.getLoginForm({ langId: item.id });
                                            portalLoginStore.setState({ langId: item.id, langText: item.language, multiLangVisible: false });
                                        }}
                                    >
                                        {item.language}
                                    </li>
                                ))
                        }
                    </ul>
                </div>
            );
        }

        return (
            <div className="e9login-multiLang">
                <span
                  className={`e9login-multiLangText ${selectedClassName}`}
                  style={multiLangVisible ? {} : { color }}
                  onClick={(e) => {
                        e.preventDefault && e.preventDefault();
                        e.stopPropagation && e.stopPropagation();
                        setState({ multiLangVisible: !multiLangVisible });
                    }}
                >
                    <span>{langText}</span>
                    <i className="wevicon-e9login-arrow" />
                </span>
                {multiLangListComp}
            </div>
        );
    }
}

export default E9MultiLang;
